<template>
 <div class="flex justify-content-center align-center" style="padding: 150px;height: 100%">
   <div class="user-container flex justify-content-space-between align-center" style="gap: 20px;border-radius: 10px;">
     <div class="flex align-center justify-content-center" style="width: 400px">
       <div>
         <userAvatar :user="state.user" />
         <div style="text-align: center;font-size: 32px;font-weight: bolder;margin-top: 10px;">{{state.user.userName}}</div>
         <div  style="margin: 10px 0;color: #9ea0a7">内分泌科主任医师</div>
         <div class="flex align-center" style="background-color: #1a8c7b;width: fit-content;padding: 8px 20px;border-radius: 5px;color: #FFFFFF;font-size: 16px;margin-top: 20px;cursor: pointer">
           <img src="@/assets/static/编辑.png" style="width: 20px;height: 20px;margin-right: 5px" alt="">
           <div  @click="open = true">编辑资料</div>
         </div>
       </div>
     </div>
     <div >
       <div class="info-card-container">
         <div class="info-card">
           <div class="card-icon">
             <img src="@/assets/static/工号.png" alt="" />
           </div>
           <div class="card-content">
             <div class="card-label">工号</div>
             <div class="card-value">待定</div>
           </div>
         </div>
         <div class="info-card">
           <div class="card-icon">
             <img src="@/assets/static/手机.png" alt="" />
           </div>
           <div class="card-content">
             <div class="card-label">手机号码</div>
             <div class="card-value">{{state.user.phone}}</div>
           </div>
         </div>

         <div class="info-card">
           <div class="card-icon">
             <img src="@/assets/static/性别.png" alt="" />
           </div>
           <div class="card-content">
             <div class="card-label">性别</div>
             <div class="card-value">{{state.user.sex == "Male"?"男":"女"}}</div>
           </div>
         </div>
         <div class="info-card">
           <div class="card-icon">
             <img src="@/assets/static/科室.png" alt="" />
           </div>
           <div class="card-content">
             <div class="card-label">所属科室</div>
             <div class="card-value">待定</div>
           </div>
         </div>

         <div class="info-card">
           <div class="card-icon">
             <img src="@/assets/static/岗位.png" alt="" />
           </div>
           <div class="card-content">
             <div class="card-label">岗位</div>
             <div class="card-value">待定</div>
           </div>
         </div>
         <div class="info-card">
           <div class="card-icon">
             <img src="@/assets/static/邮箱.png" alt="" />
           </div>
           <div class="card-content">
             <div class="card-label">电子邮箱</div>
             <div class="card-value">{{state.user.email?state.user.email:"无"}}</div>
           </div>
         </div>
       </div>
       <div class="" style="margin-top: 20px;padding: 20px 0;">
         <div class="flex" style="margin-bottom: 20px">
           <div style="border-bottom: 2px solid #1a8c7b;padding: 10px;width: fit-content;color: #1a8c7b">修改密码</div>
           <div class="flex-auto"  style="border-bottom: 2px solid #F3F4F5;"></div>
         </div>
         <resetPwd />
       </div>
     </div>
   </div>
   <el-dialog title="编辑个人资料" v-model="open" width="600px" append-to-body>
     <el-form :model="form" :rules="rules" ref="userRef" label-width="80px">
       <el-row :gutter="10">
         <el-col :span="24">
           <el-form-item label="工号"  prop="pbStaffID">
             <el-input v-model="form.pbStaffID" placeholder="请输入工号" disabled />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="手机号码" prop="phone">
             <el-input v-model="form.phone" placeholder="请输入手机号码" maxlength="11" />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="用户性别" prop="sex">
             <el-select v-model="form.sex" placeholder="请选择">
               <el-option label="男" value="Male"></el-option>
               <el-option label="女" value="Woman"></el-option>
               <el-option label="未知" value="Unknown "></el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="所属科室" prop="deptId">
             <el-tree-select v-model="form.deptId" :data="deptOptions" :props="{ value: 'id', label: 'deptName', children: 'children' }" value-key="id" placeholder="请选择所属科室" check-strictly />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="岗位" prop="postIds">
             <el-select v-model="form.postIds" multiple placeholder="请选择">
               <el-option v-for="item in postOptions" :key="item.id" :label="item.postName" :value="item.id" :disabled="item.state == false"></el-option>
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </template>
   </el-dialog>
 </div>
</template>
<script setup name="Profile">
const { proxy } = getCurrentInstance();
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import {addUser, getUserProfile, updateUser} from "@/api/system/user";
import {postOptionselect} from "@/api/system/post.js";
import {listDept} from "@/api/system/dept.js";
const rules = ref({
  pbStaffID: [{ required: true, message: "工号不能为空", trigger: "blur" }],
  phone: [
    { required: true, message: "手机号码不能为空", trigger: "blur" },
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
  ],
  sex: [{ required: true, message: "用户性别不能为空", trigger: "change" }],
  deptId: [{ required: true, message: "归属科室不能为空", trigger: "change" }],
  postIds: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
});
const state = reactive({
  user: {},
  dept: {},
  roles: [],
  roleGroup: {},
  postGroup: {}
});
// 编辑弹窗状态
const open = ref(false);
// 编辑表单数据
const form = ref({
  pbStaffID: '1212',  // 缺失
  phone: '18920405770',
  sex: 'Male',
  deptId: '2323',  // 缺失
  postIds: '23423423',  // 缺失
  email: '2771985657@qq.com'
})
/** 重置操作表单 */
function reset() {
  form.value = {
    pbStaffID: '',
    phone: '',
    sex: '',
    deptId:undefined,
    postIds: '',
    email: ''
  };
  proxy.resetForm("userRef");
  if (postOptions.value.length == 0 || roleOptions.value.length == 0) {
    postOptionselect().then(response => {postOptions.value = response.data.items;})
  }

};
/** 查询部门下拉树结构 */
function getDeptTree() {
  listDept().then(response => {
    deptOptions.value = response.data.data.items;
  });
};
const deptOptions = ref([]);  // 科室信息列表
const postOptions = ref([]);
const userInfoList = [
  {
    icon: '/path/to/工号图标.png',
    label: '工号',
    value: 'AI-2023-0425'
  },
  {
    icon: '/path/to/手机号码图标.png',
    label: '手机号码',
    value: '138 0013 8000'
  },
  {
    icon: '/path/to/性别图标.png',
    label: '性别',
    value: '男'
  },
  {
    icon: '/path/to/所属科室图标.png',
    label: '所属科室',
    value: '内分泌科'
  },
  {
    icon: '/path/to/岗位图标.png',
    label: '岗位',
    value: '主任医师'
  },
  {
    icon: '/path/to/电子邮箱图标.png',
    label: '电子邮箱',
    value: 'zhangyuhang@ai-tech.com'
  }
]
function getUser() {
  getUserProfile().then(response => {
    state.user = response.data.user;
    state.dept=response.data.dept;
    state.roles=response.data.roles;
    state.roleGroup = response.roleGroup;
    state.postGroup = response.postGroup;
    form.pbStaffID = response.data.user.pbStaffID;  // 缺失
    form.phone = response.data.user.phone;  // 手机号
    form.sex = response.data.user.sex;  // 性别
    form.deptId = response.data.user.deptId;  //科室Id
    form.postIds = response.data.user.postIds; //岗位Id
    form.email = response.data.user.email;
    console.log(state)
  });
};
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
};
/** 提交按钮 */
function submitForm() {
  proxy.$refs["userRef"].validate(valid => {
    if (valid) {
      if (form.value.id != undefined) {
        updateUser(form.value.id,form.value).then(async response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          await getList();
        });
      } else {
        console.log("提交接口",form.value)
        addUser(form.value).then(async response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          await getList();
        });
      }
    }
  });
};

postOptionselect().then(response => {
  postOptions.value = response.data.items;
})

getUser();
getDeptTree();



</script>
<style scoped lang="scss">
.user-container{
   padding: 20px;
   background-color: #FFFFFF;
}

.info-card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
  .info-card {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;

    .card-icon {
      width: 40px;
      height: 40px;
      margin-right: 12px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .card-icon img {
      width: 40px;
      height: 40px;
    }
    .card-content {
      flex: 1;
    }
    .card-label {
      font-size: 14px;
      color: #333333;
      margin-bottom: 4px;
    }
    .card-value {
      font-size: 16px;
      color: #333333;
      font-weight: 500;
    }
  }
  .info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}





</style>
